<template>
  <div style="width: 100%;height: 100%;">
    <div class="con" ref="chartSource"></div>
  </div>
</template>

<script>
import {getAction} from "@/api/manage";


export default {
  name: "EventSourcePage",
  components: {},
  data() {
    return {}
  },
  mounted() {
    this.getSourceData();
  },
  created() {

  },
  methods: {
    getSourceData() {
      let that = this;
      let params = {
        "dictType": "event_source",
        "columnName": "source"
      };
      var data = [
        {
          value: 10,
          type: "1",
          name: "微信"
        },
        {
          value: 20,
          type: "2",
          name: "微博"
        },
        {
          value: 30,
          type: "3",
          name: "百度"
        },
        {
          value: 40,
          type: "4",
        }
      ]
      that.chartSource(data);
      // getAction('/statistic/event/getSourceData', params).then(response => {
      //   let list = response.data;
      //   if (response != null && list != null) {
      //     let data = new Array();
      //     let label = new Array();
      //     for (let i = 0; i < list.length; i++) {
      //       let item = {
      //         value: list[i].cou,
      //         type: list[i].source,
      //         name: list[i].name
      //       };
      //       data.push(item);
      //       label.push(list[i].name);
      //     }
      //     that.chartSource(data);
      //   }
      // });

    },

    chartSource(data) {
      let that = this;
      let charts = that.$echarts.init(this.$refs.chartSource, '');
      let option = {
        color: ['#4992ff',
          '#7cffb2',
          '#fddd60',
          '#ff6e76',
          '#58d9f9',
          '#05c091',
          '#ff8a45',
          '#8d48e3',
          '#dd79ff'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '1%',
          left: '5%',
          textStyle: {
            fontSize: 14,//字体大小
            color: '#ffffff'//字体颜色
          },
        },
        series: [
          {
            name: '来源占比',
            type: 'pie',
            radius: ['35%', '80%'],
            center: ['55%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderWidth: 2
            },
            label: {
              show: true,
              formatter(param) {
                return param.name + " " + param.value + ' (' + param.percent + '%)';
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      charts.setOption(option);
      // 监听 window 窗口大小变化的事件
      window.onresize = function () {
        // 调用 echarts 实例对象的 resize 方法
        charts.resize()
      }
    },


  }
}
</script>
<style scoped lang="scss">

</style>
